<script setup lang="ts">
import { ref } from 'vue'
import useTodo from '../../composables/useTodo'

const { addTodo } = useTodo()

const inputValue = ref('')

const addTodoHandle = () => {
  if (!inputValue.value) {
    return
  }
  addTodo(inputValue.value)
  inputValue.value = ''
}
</script>

<template>
  <div class="flex justify-center items-center py-4 px-2 bg-gray-200 dark:bg-black">
    <i class="hidden md:block hover:animate-spin cursor-pointer fa-duotone fa-bullseye-arrow ml-1 mr-4 text-3xl text-blue-500 dark:text-white"></i>
    <input placeholder="请输入待办事项" class="rounded dark:bg-black dark:text-white flex-1 outline-none border px-2 py-2 text-sm" v-model="inputValue" type="text" @keyup.enter="addTodoHandle" />
  </div>
</template>

<style scoped lang="scss"></style>
